<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收入中心 - 护工助手</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/icons.css">
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #F6F8FA;
            color: #333;
            line-height: 1.5;
        }
        
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding-bottom: 70px;
        }
        
        /* 顶部导航栏 */
        .page-header {
            background-color: #fff;
            padding: 15px;
            text-align: center;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .page-title {
            font-size: 18px;
            font-weight: 500;
        }
        
        /* 收入概览卡片 */
        .income-overview {
            background-color: #2B7DE1;
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin: 15px;
            box-shadow: 0 2px 8px rgba(43, 125, 225, 0.3);
        }
        
        .overview-title {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 10px;
        }
        
        .total-income {
            font-size: 32px;
            font-weight: 600;
            margin-bottom: 15px;
        }
        
        .income-stats {
            display: flex;
            justify-content: space-between;
        }
        
        .stat-item {
            text-align: center;
            flex: 1;
        }
        
        .stat-value {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 12px;
            opacity: 0.8;
        }
        
        /* 收入明细选项卡 */
        .income-tabs {
            display: flex;
            background-color: #fff;
            margin: 0 15px;
            border-radius: 10px 10px 0 0;
            overflow: hidden;
        }
        
        .tab-item {
            flex: 1;
            text-align: center;
            padding: 15px 0;
            font-size: 14px;
            color: #666;
            cursor: pointer;
            position: relative;
        }
        
        .tab-item.active {
            color: #2B7DE1;
            font-weight: 500;
        }
        
        .tab-item.active:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 25%;
            width: 50%;
            height: 3px;
            background-color: #2B7DE1;
            border-radius: 3px 3px 0 0;
        }
        
        /* 收入记录列表 */
        .income-list {
            background-color: white;
            margin: 0 15px 15px;
            border-radius: 0 0 10px 10px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .income-item {
            display: flex;
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .income-item:last-child {
            border-bottom: none;
        }
        
        .income-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #E6F7FF;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            color: #1890FF;
            font-size: 18px;
        }
        
        .income-info {
            flex: 1;
        }
        
        .income-title {
            font-size: 15px;
            font-weight: 500;
            color: #333;
            margin-bottom: 5px;
        }
        
        .income-time {
            font-size: 12px;
            color: #999;
        }
        
        .income-amount {
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }
        
        .income-amount.plus {
            color: #2B7DE1;
        }
        
        .income-amount.minus {
            color: #FF4D4F;
        }
        
        /* 提现卡片 */
        .withdraw-card {
            background-color: white;
            border-radius: 10px;
            margin: 15px;
            padding: 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .card-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 15px;
            color: #333;
        }
        
        .withdraw-balance {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .balance-label {
            font-size: 14px;
            color: #666;
        }
        
        .balance-amount {
            font-size: 24px;
            font-weight: 600;
            color: #333;
        }
        
        .withdraw-btn {
            background-color: #2B7DE1;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 12px 0;
            width: 100%;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
        }
        
        /* 提现记录 */
        .withdraw-history {
            margin-top: 20px;
        }
        
        .history-title {
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
        }
        
        .withdraw-item {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .withdraw-item:last-child {
            border-bottom: none;
        }
        
        .withdraw-info {
            flex: 1;
        }
        
        .withdraw-date {
            font-size: 14px;
            color: #333;
            margin-bottom: 3px;
        }
        
        .withdraw-status {
            font-size: 12px;
            color: #52C41A;
        }
        
        .withdraw-status.pending {
            color: #FAAD14;
        }
        
        .withdraw-amount {
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }
        
        /* 底部导航栏 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-color: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.05);
            max-width: 600px;
            margin: 0 auto;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #666;
            font-size: 12px;
            text-decoration: none;
        }
        
        .nav-item.active {
            color: #2B7DE1;
        }
        
        .nav-icon {
            font-size: 22px;
            margin-bottom: 2px;
        }
        
        /* 日期选择器 */
        .date-filter {
            display: flex;
            justify-content: space-between;
            padding: 15px;
            background-color: white;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .date-btn {
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 12px;
            background-color: #f0f0f0;
            color: #666;
            cursor: pointer;
        }
        
        .date-btn.active {
            background-color: #E6F7FF;
            color: #2B7DE1;
        }
        
        /* 收入为空的状态 */
        .empty-state {
            text-align: center;
            padding: 40px 0;
            color: #999;
        }
        
        .empty-icon {
            font-size: 48px;
            margin-bottom: 15px;
        }
        
        .empty-text {
            font-size: 14px;
        }
        
        /* 内容区域 */
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        /* 银行卡样式 */
        .bank-card {
            background: linear-gradient(135deg, #2B7DE1, #1E5BB0);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            color: white;
            position: relative;
            overflow: hidden;
        }
        
        .bank-logo {
            position: absolute;
            right: 15px;
            top: 15px;
            font-size: 24px;
            opacity: 0.8;
        }
        
        .card-number {
            font-size: 16px;
            letter-spacing: 2px;
            margin: 15px 0;
        }
        
        .card-holder {
            font-size: 12px;
            opacity: 0.8;
            margin-bottom: 5px;
        }
        
        .card-name {
            font-size: 14px;
            font-weight: 500;
        }
        
        .card-chip {
            width: 40px;
            height: 30px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 5px;
            margin-bottom: 15px;
        }
        
        /* 提现表单 */
        .withdraw-form {
            margin-top: 20px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-label {
            display: block;
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
        }
        
        .form-input {
            width: 100%;
            height: 40px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            padding: 0 12px;
            font-size: 14px;
        }
        
        .form-input:focus {
            border-color: #2B7DE1;
            outline: none;
            box-shadow: 0 0 0 2px rgba(43, 125, 225, 0.2);
        }
        
        .form-select {
            width: 100%;
            height: 40px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            padding: 0 12px;
            font-size: 14px;
            background-color: white;
        }
        
        .form-hint {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 顶部标题 -->
        <div class="page-header">
            <div class="page-title">收入中心</div>
        </div>
        
        <!-- 收入概览 -->
        <div class="income-overview">
            <div class="overview-title">总收入(元)</div>
            <div class="total-income">¥6,850.00</div>
            <div class="income-stats">
                <div class="stat-item">
                    <div class="stat-value">¥3,650.00</div>
                    <div class="stat-label">本月收入</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">¥120.00</div>
                    <div class="stat-label">今日收入</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">¥2,500.00</div>
                    <div class="stat-label">可提现</div>
                </div>
            </div>
        </div>
        
        <!-- 收入明细选项卡 -->
        <div class="income-tabs">
            <div class="tab-item active" data-tab="income-detail">收入明细</div>
            <div class="tab-item" data-tab="withdraw">提现</div>
        </div>
        
        <!-- 收入明细内容 -->
        <div class="tab-content active" id="income-detail">
            <!-- 日期筛选 -->
            <div class="date-filter">
                <div class="date-btn active">全部</div>
                <div class="date-btn">本月</div>
                <div class="date-btn">上月</div>
                <div class="date-btn">自定义</div>
            </div>
            
            <!-- 收入记录列表 -->
            <div class="income-list">
                <div class="income-item">
                    <div class="income-icon">💰</div>
                    <div class="income-info">
                        <div class="income-title">李先生的护理服务</div>
                        <div class="income-time">2023-06-12 17:30</div>
                    </div>
                    <div class="income-amount plus">+¥280.00</div>
                </div>
                <div class="income-item">
                    <div class="income-icon">💰</div>
                    <div class="income-info">
                        <div class="income-title">王奶奶的护理服务</div>
                        <div class="income-time">2023-06-10 16:45</div>
                    </div>
                    <div class="income-amount plus">+¥320.00</div>
                </div>
                <div class="income-item">
                    <div class="income-icon">💰</div>
                    <div class="income-info">
                        <div class="income-title">张女士的护理服务</div>
                        <div class="income-time">2023-06-08 18:00</div>
                    </div>
                    <div class="income-amount plus">+¥350.00</div>
                </div>
                <div class="income-item">
                    <div class="income-icon">💰</div>
                    <div class="income-info">
                        <div class="income-title">刘先生的护理服务</div>
                        <div class="income-time">2023-06-05 17:15</div>
                    </div>
                    <div class="income-amount plus">+¥280.00</div>
                </div>
                <div class="income-item">
                    <div class="income-icon">💳</div>
                    <div class="income-info">
                        <div class="income-title">提现至银行卡</div>
                        <div class="income-time">2023-06-01 14:20</div>
                    </div>
                    <div class="income-amount minus">-¥1,000.00</div>
                </div>
                <div class="income-item">
                    <div class="income-icon">💰</div>
                    <div class="income-info">
                        <div class="income-title">赵女士的护理服务</div>
                        <div class="income-time">2023-05-28 16:30</div>
                    </div>
                    <div class="income-amount plus">+¥320.00</div>
                </div>
            </div>
        </div>
        
        <!-- 提现内容 -->
        <div class="tab-content" id="withdraw">
            <!-- 提现卡片 -->
            <div class="withdraw-card">
                <div class="card-title">提现</div>
                <div class="withdraw-balance">
                    <div class="balance-label">可提现金额</div>
                    <div class="balance-amount">¥2,500.00</div>
                </div>
                
                <!-- 银行卡信息 -->
                <div class="bank-card">
                    <div class="bank-logo">🏦</div>
                    <div class="card-chip"></div>
                    <div class="card-number">**** **** **** 8765</div>
                    <div class="card-holder">持卡人</div>
                    <div class="card-name">张护工</div>
                </div>
                
                <!-- 提现表单 -->
                <div class="withdraw-form">
                    <div class="form-group">
                        <label class="form-label">提现金额</label>
                        <input type="text" class="form-input" placeholder="请输入提现金额" value="2500.00">
                        <div class="form-hint">单笔提现金额不得低于100元</div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">提现方式</label>
                        <select class="form-select">
                            <option>工商银行 (8765)</option>
                            <option>支付宝</option>
                            <option>微信</option>
                        </select>
                    </div>
                </div>
                
                <button class="withdraw-btn">确认提现</button>
                
                <!-- 提现记录 -->
                <div class="withdraw-history">
                    <div class="history-title">提现记录</div>
                    <div class="withdraw-item">
                        <div class="withdraw-info">
                            <div class="withdraw-date">2023-06-01 14:20</div>
                            <div class="withdraw-status">提现成功</div>
                        </div>
                        <div class="withdraw-amount">¥1,000.00</div>
                    </div>
                    <div class="withdraw-item">
                        <div class="withdraw-info">
                            <div class="withdraw-date">2023-05-15 10:35</div>
                            <div class="withdraw-status">提现成功</div>
                        </div>
                        <div class="withdraw-amount">¥1,500.00</div>
                    </div>
                    <div class="withdraw-item">
                        <div class="withdraw-info">
                            <div class="withdraw-date">2023-05-02 16:40</div>
                            <div class="withdraw-status pending">处理中</div>
                        </div>
                        <div class="withdraw-amount">¥800.00</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <nav class="bottom-nav">
            <a href="index.html" class="nav-item">
                <span class="nav-icon">🏠</span>
                <span>首页</span>
            </a>
            <a href="signin-center.html" class="nav-item">
                <span class="nav-icon">✓</span>
                <span>签到中心</span>
            </a>
            <a href="orders.html" class="nav-item">
                <span class="nav-icon">📋</span>
                <span>订单中心</span>
            </a>
            <a href="profile.html" class="nav-item">
                <span class="nav-icon">👤</span>
                <span>我的</span>
            </a>
        </nav>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 选项卡切换功能
            const tabItems = document.querySelectorAll('.income-tabs .tab-item');
            const tabContents = document.querySelectorAll('.tab-content');
            
            tabItems.forEach(item => {
                item.addEventListener('click', function() {
                    const tabId = this.getAttribute('data-tab');
                    
                    // 更新选项卡状态
                    tabItems.forEach(tab => tab.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 更新内容区域
                    tabContents.forEach(content => content.classList.remove('active'));
                    document.getElementById(tabId).classList.add('active');
                });
            });
            
            // 日期筛选按钮
            const dateBtns = document.querySelectorAll('.date-btn');
            dateBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    dateBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 这里可以添加日期筛选逻辑
                    const filterType = this.textContent;
                    console.log('筛选类型:', filterType);
                    
                    // 模拟筛选效果，实际项目中应该根据筛选条件请求数据
                    if (filterType === '本月') {
                        // 显示本月数据
                        alert('已筛选本月收入记录');
                    } else if (filterType === '上月') {
                        // 显示上月数据
                        alert('已筛选上月收入记录');
                    } else if (filterType === '自定义') {
                        // 显示日期选择器
                        alert('请选择日期范围');
                    }
                });
            });
            
            // 提现按钮
            const withdrawBtn = document.querySelector('.withdraw-btn');
            withdrawBtn.addEventListener('click', function() {
                const amountInput = document.querySelector('.form-input').value;
                const amount = parseFloat(amountInput);
                
                if (isNaN(amount) || amount < 100) {
                    alert('提现金额不能低于100元');
                    return;
                }
                
                if (amount > 2500) {
                    alert('提现金额不能超过可提现余额');
                    return;
                }
                
                alert(`提现申请已提交，金额：¥${amount.toFixed(2)}，预计1-3个工作日到账`);
                
                // 更新可提现余额
                const balanceAmount = document.querySelector('.balance-amount');
                const newBalance = (2500 - amount).toFixed(2);
                balanceAmount.textContent = `¥${newBalance}`;
                
                // 添加新的提现记录
                const withdrawHistory = document.querySelector('.withdraw-history');
                const now = new Date();
                const dateStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
                
                const newRecord = document.createElement('div');
                newRecord.className = 'withdraw-item';
                newRecord.innerHTML = `
                    <div class="withdraw-info">
                        <div class="withdraw-date">${dateStr}</div>
                        <div class="withdraw-status pending">处理中</div>
                    </div>
                    <div class="withdraw-amount">¥${amount.toFixed(2)}</div>
                `;
                
                const firstRecord = withdrawHistory.querySelector('.withdraw-item');
                withdrawHistory.insertBefore(newRecord, firstRecord);
            });
        });
    </script>
</body>
</html> 